<template>
  <div>
    <child-component>
      <h2 slot="header">标题</h2>
      <p>正文内容</p>
      <p>更多正文内容</p>
      <div slot="footer">底部信息</div>
    </child-component>
  </div>
</template>
<script>
export default {
  data(){
    return{
      
    }
  },
  components:{
    'child-component':{
      template: `
        <div class="container">
          <div class="header">
            <slot name="header"></slot>
          </div>
          <div class="main">
            <slot></slot>
          </div>
          <div class="footer">
            <slot name="footer"></slot>
          </div>
        </div>
      `,
      mounted(){
        var header = this.$slots.header;
        var main = this.$slots.default;
        var footer = this.$slots.footer;
        console.log('footer',footer);
        console.log(footer[0].elm.innerHTML);
        console.log('main',main);
      }
    },
  }
}
</script>
<style scoped>
.container{
  border: 1px solid #ccc;
}
</style>


